<template>
    <el-tabs v-model="activeName">
        <el-scrollbar height="calc(100vh - 85px)">
            <el-tab-pane v-for="item in data" :label="item.label" :name="item.name" :key="item.name">
                <!-- 这里样式有点问题scrollbar应该放v-for外面，有空再修 -->
                    <component :is="item.component"></component>
            </el-tab-pane>
        </el-scrollbar>
    </el-tabs>
</template>
<script setup lang="ts">
import { ref,inject } from 'vue'
import { ElTabs,ElTabPane,ElScrollbar } from 'element-plus'
import componentPane from './components/componentPane.vue'
import eventPane from './components/eventPane.vue'
import propertyPane from './components/propertyPane/index.vue'
import stylePane from './components/stylePane.vue'
const activeName = ref('componentPane')
const data = [
    {label:'组件',name:"componentPane",component: componentPane},
    {label:'属性',name:"propertyPane" ,component: propertyPane},
    {label:'样式',name:"stylePane"     ,component: stylePane},
    {label:'事件',name:"eventPane" ,component: eventPane},
]
const eventBus = inject<any>('eventBus');
eventBus.on('updTemplate',()=>{
    activeName.value = 'propertyPane'
})
</script>
<style scoped>
.el-tabs>:deep(.el-tabs__header>.el-tabs__nav-wrap>.el-tabs__nav-scroll){
    display: flex;
    justify-content: center;
}
.el-tabs>:deep(.el-tabs__header){
    margin: 0;
}
</style>
